Docent: P. Gielisse
Datum: 11-01-2024
Student: Amke Verberne
Klas: DDM2d
Bij dit project hebben we geleerd hoe je een wireframe kan maken door gebruik te maken van Adobe XD en Adobe illustrator. We hebben hierbij een leerzame app bedacht voor kinderen.
Planning:
Week 1&2 – Introductie & Low Fidelity Wireframes (Debriefing & Wireframes sketches)
Week 3&4 – Wireframes, Adobe XD (Interactief, Mid Fidelity Ontwerp)
Week 5&6 – Uitwerking Interface, Adobe Illustrator (High Fidelity Ontwerp)
Week 7&8 - Kerstvakantie, Oud & Nieuw
Week 9 - Deadline Interactieve Interface + Proces(document)
Week 10 – Project of Voorbereiding ‘Schouw’
Leerdoelen:
Aan de eind van deze periode is het de bedoeling dat ik de volgende leerdoelen behaald hebben.
- Heb ik kennis gemaakt met, en kan ik op basisniveau werken in Adobe Illustrator.
- Kan ik toelichten wat de tools ‘Adobe Illustrator’ en ‘Adobe XD’ toevoegen voor mijn ontwikkeling als Mediavormgever.
- Kan ik toelichten wat de tools ‘Adobe Illustrator’ en ‘Adobe XD’ toevoegen voor mijn ontwikkeling als Mediavormgever.
- Heb ik kennis gemaakt met, en kan ik op een basisniveau werken in Adobe XD.
- Heb ik actief mijn ‘toolbox’ verder ontwikkeld.
- Heb ik actief mijn ‘toolbox’ verder ontwikkeld.
- Kan ik benoemen wat userflow, wireframes en een interface is.
- Kan ik uitleggen waarom een interface (UI) zo belangrijk is.
De focusgebieden zijn:
Het onderzoeken en begrijpen van de opdracht.
Het verzamelen en gebruiken van informatie uit verschillende bronnen.
Ik analyseer mijn gevonden informatie en trek op basis daarvan conclusies.
Ik maak een concept wat bij mijn onderzoek past en maak hierbij een visueel beeld.
Ik lever mijn eindproduct op de juiste manier/vorm in.
Ik ontplooi mijn eigen talenten en ambities. Ik sta open om dingen te leren. En ik geef richting aan mijn eigen ontwikkeling.
Doelgroep:
De doelgroep van het spel zijn kinderen van 6 tot 10 jaar. Deze doelgroep gaat om kinderen die hoogstwaarschijnlijk nog op de basisschool zitten en nog veel kunnen leren. Het spel moet dus kinderen van die leeftijd die nog moeite hebben met vakken zoals rekenen, taal enz. aanspreken.
Opdracht:
Doe onderzoek naar educatieve spellen voor de juiste doelgroep. De bedoeling is dat we op basis van dit onderzoek en de dingen die we al weten een leerzame game voor kinderen op de lagere school gaan bedenken. We gaan deze periode aan de interface werken voor de game, dit doen we in adobe illustrator en adobe XD.
Onderzoek
Om een idee te krijgen hoe een leerzaam spel voor kinderen er uit kan zien heb ik eerst onderzoek gedaan. Dit heb ik gedaan door andere bestaande spellen uit te proberen. Hieronder zie je drie van de spellen waar ik onderzoek naar gedaan heb.
Een van de apps die ik heb bekeken is Fun English. Deze app is bedoelt om kinderen op een leuke manier engels te leren. Wat mij opviel was dat de app een korte maar duidelijke intro had. Er was duidelijk te zien hoeveel je moest invullen door de balk boven aan het scherm, en ook de kleuren van de knoppen maakte alles erg duidelijk. De kleuren, vormgeving en het lettertypen sluiten ook goed aan bij de doelgroep.
Ook heb ik gekeken naar de app Duolingo. Deze app is gericht op het leuk leren van talen. De app heeft verschillende manieren om jou gemotiveerd te houden. Dit doen ze door beloningen en andere meldingen te geven. Ook hun "mascotte" Moedicht je aan om te blijven leren. Dit kan dus ook erg goed werken voor kinderen. Er is een duidelijk kleuren thema gebruikt, Ook zie je de zelfde knoppen meerdere keren terug komen zoals de terug knop. Wel viel het mij op dat de intro van Duolingo erg lang is vergleken met de andere apps die ik bekeken heb. Ze hebben meerdere tussenschermen om je extra te motiveren en geven je ook veel verschillende opties om jou zo goed mogelijk te helpen met je doel.
De laatste app die ik bekeken heb heet Learning games. Dit spel kan kinderen helpen met het oefenen van taal, rekenen, schrijven en nog meer. De leeftijdscategorie is erg breed en er zijn dus veel opties. In tegenstelling tot duolingo heeft deze app een korte intro. Wel zijn er weer vrolijke kleuren en leuke illustraties toegevoegd die kinderen aanspreken. Aan het eind van elk spel krijg je een beloning om te laten zien dat je het goed hebt gedaan en om kinderen te motiveren om verder te leren.
Schetsen
Na het doen van onderzoek ben ik begonnen met het schetsen van een eigen wireframe. Hierdoor had ik alvast op papier staan waar er allemaal ongeveer in moest komen te staan. (De frames staan op volgorde van links naar rechts)
Wireframe
Na het maken van de schetsen ben ik begonnen met het maken van mijn wireframe. Ik heb eerst alleen de plaats van alle dingen bepaalt en ben daarna pas doorgegaan met het toevoegen van kleur.
Voor het spel heb ik gekozen om een rekenspel uit te werken. Het idee hierbij was dat je door het oplossen van de sommen de somberen wolken weg haalt waardoor je uiteindelijk een opgeklaarde lucht met vrolijke bloemetjes over houd.
Toen ik aan dit project begon had ik nog niet eerder met Adobe XD gewerkt dus dit was zeker een uitdaging, maar ik ben wel tevreden met de dingen die ik heb geleerd.
Ook heb ik dit project met adobe illustrator gewerkt. Hiermee heb ik onderandere de wolken gemaakt, maar ook heb ik geprobeert de icons voor de verschillende vakken in Adobe illustrator te maken.
Het testen van alle koppelingen
Om te controleren of alle knoppen van de app werkten heb ik tussendoor de tijd genomen om alles te testen. Hierin kwam ik er namelijk tocht vaker achter dat niet alles werkte op de manier die ik in gedachten had. Ook heb ik de mensen om me heen het spel laten door lopen, hierdoor kon ik alle fouten uit het spel halen.
Wanneer er paginas waren die nog niet bestonden, zoals wanneer je kiest voor een ander vak dan rekenen wordt je naar een error scherm gestuurd zodat je weer terug kan naar het home scherm.
Dit zijn de uiteindelijke screenshots van mijn werk.
Hieronder vind je de Adobe XD link naar mijn eindwerk:
https://xd.adobe.com/view/7792f035-93b6-47ff-848d-5acd080b516e-22c1/
